var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 700;
var RADIUS = 8;
var MARGIN_TOP = 10;
var MARGIN_LEFT = 10;
var ENDTIME = new Date();
var ENDTIME_H = ENDTIME.setHours(24);
var ENDTIME_M = ENDTIME.setMinutes(0);
var ENDTIME_S = ENDTIME.setSeconds(0);

var ball = []; //小球-空数组
var ballColor = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]; //小球颜色
window.onload = function() {

	var canvas = document.querySelector('#canvas');
	canvas.width = WINDOW_WIDTH;
	canvas.height = WINDOW_HEIGHT;
	var context = canvas.getContext('2d');
	var showTime = countData();
	setInterval(function() {
		init(context);
		update();
	}, 50);

	function ballCreate(x, y, num) { // 随时间变化创建小球
		for (var i = 0; i < digit[num].length; i++) {
			for (var j = 0; j < digit[num][i].length; j++) {
				if (digit[num][i][j] == 1) {
					var ballChoice = { //小球参数
						x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1), //X坐标
						y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1), //y坐标
						g: Math.random() + 2, //加速度
						speedX: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4, //x加速度
						speedY: -3, //y加速度
						color: ballColor[Math.floor(Math.random() * ballColor.length)] //随机颜色
					};
					ball.push(ballChoice);
				};
			};
		};
	};


	function countData() { // 时间-毫秒级
		var NOWTIME = new Date().getTime();
		var less = ((ENDTIME.getTime()) - NOWTIME) / 1000;
		return less >= 0 ? less : 0;
	};

	function update() { //更新时间
		var nextTime = countData();
		var nexthour = parseInt(nextTime / 60 / 60);
		var nextminute = parseInt(nextTime / 60 % 60);
		var nextsecond = parseInt(nextTime % 60);
		var nowsecond = parseInt(showTime % 60);

		var hour = parseInt(showTime / 60 / 60);
		var minute = parseInt(showTime / 60 % 60);
		var second = parseInt(showTime % 60);

		if (nextsecond != nowsecond) {
			if (parseInt(hour / 10) != parseInt(nexthour / 10)) {
				ballCreate(MARGIN_LEFT, MARGIN_TOP, parseInt(nexthour / 10));
			};

			if (parseInt(hour % 10) != parseInt(nexthour % 10)) {
				ballCreate(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(nexthour % 10));
			};

			if (parseInt(minute / 10) != parseInt(nextminute / 10)) {
				ballCreate(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(nextminute / 10));
			};

			if (parseInt(minute % 10) != parseInt(nextminute % 10)) {
				ballCreate(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(nextminute % 10));
			};

			if (parseInt(second / 10) != parseInt(nextsecond / 10)) {
				ballCreate(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(nextsecond / 10));
				//				console.log(ball)
			};

			if (parseInt(second % 10) != parseInt(nextsecond % 10)) {
				ballCreate(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(nextsecond % 10));
			};

			showTime = nextTime; //重置时间
		};
		updateBall();
	};


	function updateBall() {
		for (var i = 0; i < ball.length; i++) {
			ball[i].x += ball[i].speedX;
			ball[i].y += ball[i].speedY;
			ball[i].speedY += ball[i].g;

			if (ball[i].y >= WINDOW_HEIGHT - 2 * RADIUS) {
				ball[i].y = WINDOW_HEIGHT - 2 * RADIUS;
				ball[i].speedY = -ball[i].speedY * 0.6;
			}
			if (ball[i].x >= WINDOW_WIDTH - 2 * RADIUS) {
				ball[i].y = WINDOW_WIDTH - 2 * RADIUS;
				ball[i].speedX = -ball[i].speedX * 0.6;
			}
		}
	}

	function init(txt) { //初始化 时 分 秒

		txt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
		var hour = parseInt(showTime / 60 / 60);
		var minute = parseInt(showTime / 60 % 60);
		var second = parseInt(showTime % 60);


		draw(MARGIN_LEFT, MARGIN_TOP, parseInt(hour / 10), context);
		draw(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hour % 10), context);
		draw(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, context);
		draw(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minute / 10), context);
		draw(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minute % 10), context);
		draw(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, context);
		draw(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(second / 10), context);
		draw(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(second % 10), context);

		for (var i = 0; i < ball.length; i++) {

			txt.beginPath();
			txt.arc(ball[i].x, ball[i].y, RADIUS, 0, 2 * Math.PI, false);
			txt.closePath();

			txt.fillStyle = ball[i].color;
			txt.fill();
		};
	};

	function draw(x, y, num, txt) { //画小球
		for (var i = 0; i < digit[num].length; i++) {
			for (var j = 0; j < digit[num][i].length; j++) {
				if (digit[num][i][j] == 1) {
					txt.beginPath();
					txt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI, false);
					txt.closePath();


					txt.fillStyle = 'brown';
					txt.fill();
				};
			};
		};
	};
}